<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_left_draw_tool">
        <NCollapse default-expanded-names="Collapse_1" accordion>
            <!-- SVG图元 -->
            <NCollapseItem title="SVG图元" name="Collapse_1">
                <NTooltip placement="bottom" trigger="hover" v-for="item in svgPel">
                    <template #trigger>
                        <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36"
                            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="myStore.menuHandle(item.key)"></svg>
                        <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36"
                            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="myStore.menuHandle(item.key)"></svg>
                    </template>
                    <span>{{ item.label }}</span>
                </NTooltip>
            </NCollapseItem>
            <!-- SVG图元 -->
            <NCollapseItem title="Canvas图元" name="Collapse_2">
                <NTooltip placement="bottom" trigger="hover" v-for="item in canvasPel">
                    <template #trigger>
                        <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36"
                            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="myStore.menuHandle(item.key)"></svg>
                        <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="36" height="36"
                            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="myStore.menuHandle(item.key)"></svg>
                    </template>
                    <span>{{ item.label }}</span>
                </NTooltip>
            </NCollapseItem>

        </NCollapse>
    </div>
</template>

<script setup lang="ts">
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布
/** 解构-画布 */
let {
    canvasPel,
    svgPel
} = storeToRefs(myStore);

</script>

<style lang="scss" scoped>
// 左侧绘制工具
.h_left_draw_tool {
    width: 100%;
    height: 100%;
    background-color: rgb(80, 80, 80);
    user-select: none;
}

//SVG图标
.h_svg_icon {
    user-select: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: rgb(80, 80, 80);

    &:hover {
        background-color: rgb(250, 250, 250);
    }
}
</style>
@/store